<template>
    <div class="body">
        <div class="title">
            欢迎来到管理员首页
        </div>
        <div class="homeBody">
            <div class="first" @click="showusers">
                <div class="icon">
                    <el-avatar class="large-avatar" shape="square" size="large" :src=userImage></el-avatar> 
                    
                </div>
                <div class="option">
                    用户管理
                </div>
            </div>
            <div class="card" @click="showrentor">
                <div class="icon">
                    <el-avatar class="large-avatar" shape="square" size="large" :src="renterImage"></el-avatar>
                </div>
                <div class="option">
                    租户管理
                </div>
            </div>
            <div class="card" @click="showdepartment">
                <div class="icon">
                    <el-avatar class="large-avatar" shape="square" size="large" :src="departmentImage"></el-avatar>
                </div>
                <div class="option">
                    部门管理
                </div>
            </div>
            <div class="card" @click="showcourse">
                <div class="icon">
                    <el-avatar class="large-avatar" shape="square" size="large" :src="courseImage"></el-avatar>
                </div>
                <div class="option">
                    课程管理
                </div>
            </div>
            <div class="card" @click="showmeetings">
                <div class="icon">
                    <el-avatar class="large-avatar" shape="square" size="large" :src="meetingImage"></el-avatar>
                </div>
                <div class="option">
                    会议管理
                </div>
            </div>
            <div class="card" @click="shownews">
                <div class="icon">
                    <el-avatar class="large-avatar" shape="square" size="large" :src="newsImage"></el-avatar>
                </div>
                <div class="option">
                    资讯管理
                </div>
            </div>
        </div>
        <div class="container">
            <div class="title">
                数据分析大屏
            </div>
            <div class="dataShow">
                <div>
                    <ChinaMap />
                </div>
                <div>
                    <Gender />
                    <div class="user-stats">
                        <p>在线用户数量: {{curOnline}}</p>
                        <p>总用户数: {{total}}</p>
                    </div>
                </div>
            </div>
            <div class="dataShow">
                <DataBar class="full-width" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { useRouter } from 'vue-router';
    import userImage from '../../assets/用户管理图标.png';
    import renterImage from '../../assets/租户管理图标.png';
    import departmentImage from '../../assets/部门管理图标.png';
    import courseImage from '../../assets/课程管理图标.png';
    import meetingImage from '../../assets/会议管理图标.png';
    import newsImage from '../../assets/咨询管理图标.png';
    import request from '../../until/request.ts';
    import { useUserInfoStore } from '../../store/userInfo.ts'
    import ChinaMap from '../commonUse/ChinaMap.vue';
    import Gender from '../commonUse/Gender.vue';
    import DataBar from '../commonUse/DataBar.vue';
    import { onMounted, ref } from 'vue';

    const userInfoStore = useUserInfoStore()
    var curOnline = ref(0);
    var total = ref(0);
    
    let router = useRouter()
    const showusers = () => {
        router.push('/home/user');
    }

    const showrentor = () => {
        router.push('/home/rentor');
    }

    const shownews = ()=> {
        router.push('/home/news');
    }

    const showcourse = ()=> {
        router.push('/home/course');
    }

    const showmeetings = ()=> {
        router.push('/home/meeting');
    }

    const showdepartment = ()=> {
        router.push('/home/department');
    }
    //发送请求
    const getUserData = async () => {
        const response = await request.post('/user/getCurrUser')
        userInfoStore.setInfo(response.data.data)
        
    }
    getUserData();

    const getStatsData = async () => {
        const response = await request.post('/user/stats');
        console.log("here");
        curOnline.value = response.data.curOnline;
        total.value = response.data.total;
    }
    getStatsData();

</script>

<style> 
    .body {
        border-radius: 5px;
        height: 480px;
        border: 1px solid rgb(144, 144, 144);
    }
    .homeBody {
        display: flex;
        justify-content: center;
        
    }
    .first {
        height: 300px;
        width: 200px;
        margin-top: 50px;
        background-color:rgb(64, 158, 255);
    }
    .first .icon {
        margin-top: 50px;
        text-align: center
    }
    .title {
        width: 100%;
        text-align: center;
        font-size: 50px;
        font-family: "PingFang SC";
    }
    .card {
        height: 300px;
        width: 200px;
        margin: 50px 0 0 15px;
        background-color:rgb(64, 158, 255);
    }
    .card .icon {
        margin-top: 50px;
        text-align: center
    }
    .option {
        width: 100%;
        margin-top: 60px;
        text-align: center;
        font-size: 20px;
        font-family: "PingFang SC";
    }
    .large-avatar {
    width: 100px; /* 设置为所需的宽度 */
    height: 100px; /* 设置为所需的高度 */
    }

    .container {
        margin-top: 80px;
        border-radius: 5px;
        height: 1500px;
        border: 1px solid rgb(144, 144, 144);
    }
    .container .dataShow {
        justify-content: center;
        display: flex;
        margin-left: 30px;
    }
    .full-width {
        flex: 1 1 100%;
    }
    .user-stats {
        text-align: center;
        font-size: 20px;
        color: rgb(47, 69, 84);
        font-weight: 700;
        font-size: 25px;
    }
</style>